<template>
  <div>   
    <div class="container">   
    <scroller ref="loadMore" class="institution-list" :on-refresh="loadTop" :on-infinite="loadBottom">   
    <p class="head">社区</p>
    <swiper :options="swiperOption" ref="swiper">
        <swiper-slide v-for="(slide, index) in swiperSlides " :key="index">
          <div>
            <img v-lazy="slide.picture" class="lazy-img-fadein" lazy-progressive="true">
          </div>
        </swiper-slide> 
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div>
        <v-touch
          tag="div"
          class="pro-item shequ"
          @tap="toInstiDetail(instiItem.keyId)"
          v-for="(instiItem, index) in institutionList"
          :key="index"
        > 
        <router-link  to="/Content">  
          <div class="title">
            <div class="touxiang">
              <img class="img-fadein" v-lazy="instiItem.firstPicture" lazy-progressive="true">
            </div>
            <div class="pro-name">
              <p class="name">{{ instiItem.name }}</p>
            </div>
            <div class="pro-time">
              <p class="time">{{ instiItem.time }}</p>
            </div>
          </div>
          <div  class="content">
            <div>
              <p class="tag">{{ instiItem.tag }}</p>
              <p class="jianjie">{{ instiItem.jianjie }}</p>
            </div>
            <div>
              <img class="img" v-lazy="instiItem.Picture" lazy-progressive="true">
            </div>
          </div>
          <p class="border"></p>
          </router-link>
        </v-touch>
      </div>
    </scroller>
    </div>
    <navigation></navigation>
  </div>
</template>

<script>
export default {
  data(){
    return{
      page: 1,
      pageTotal: 1000,
      pageSize: 4,
      suitAge: "",
      classified: 8,
      coordinate: "",
      locationDisable: false,
      searchDisable: false,
      swiperOption: {
        autoplay: {
          delay: 3000
        },
        setWrapperSize: true,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        mousewheelControl: true,
        observeParents: true
      },
      swiperSlides: [
        {
          picture: require("./xunhuan4.jpg"),
        },
        {
          picture: require("./xunhuan3.jpg"),
        },
      ],
      institutionList: [
        {
          suitAge: "",
          distance: null,
          experienceState: 1,
          dealNumber: 236,
          firstPicture: require("./touxiang1.jpg"),
          name: "红薯阅读",
          keyId: 25,
          appointmentNumber: 304,
          state: 1,
          viewNumber: 929,
          time: "2018-1-14 10:30",
          Picture: require("./tu6.jpg"),
          tag: "杨澜 生命中的别离",
          jianjie: "目送孩子远去，我心中虽伤感,但毕竟充满希望和骄傲。但...",
        },
        {
          suitAge: "",
          distance: null,
          experienceState: 1,
          dealNumber: 236,
          firstPicture: require("./touxiang2.jpg"),
          name: "李荷西",
          keyId: 25,
          appointmentNumber: 304,
          state: 1,
          viewNumber: 929,
          time: ("2018-1-14 22:30"),
          Picture: require("./tu2.jpg"),
          tag: "有些话我不能对你说",
          jianjie: ("成年人之间的靠近，就像一场旅程。"),
        },
        {
          suitAge: "",
          distance: null,
          experienceState: 1,
          dealNumber: 236,
          firstPicture: require("./touxiang3.jpg"),
          name: "言实实言",
          keyId: 25,
          appointmentNumber: 304,
          state: 1,
          viewNumber: 929,
          time: ("2018-1-16 8:30"),
          Picture: require("./tu3.jpg"),
          tag: ("行径此处"),
          jianjie: ("王爱品的诗中不时流露出来的，是一种十足的古典精神。"),
        },
        {
          suitAge: "",
          distance: null,
          experienceState: 1,
          dealNumber: 236,
          firstPicture: require("./touxiang4.jpg"),
          name: "马未都",
          keyId: 25,
          appointmentNumber: 304,
          state: 1,
          viewNumber: 929,
          time: ("2018-1-20 17：39"),
          Picture: require("./tu5.jpg"),
          tag: ("粮店"),
          jianjie: ("粮店过去是城市的一景，一般门脸不大，屋里摆的很紧凑..."),
        },
        {
          suitAge: "",
          distance: null,
          experienceState: 1,
          dealNumber: 236,
          firstPicture: require("./touxiang7.jpg"),
          name: "宋染青",
          keyId: 25,
          appointmentNumber: 304,
          state: 1,
          viewNumber: 929,
          time: ("2018-1-22 23:12"),
          Picture: require("./tu4.jpg"),
          tag: ("有暗香盈袖"),
          jianjie: ("成婚这日，丫头小环为我披上大红嫁衣，我对着镜子，有些失神..."),
        },
        {
          suitAge: "",
          distance: null,
          experienceState: 1,
          dealNumber: 236,
          firstPicture: require("./touxiang2.jpg"),
          name: "读懂资治通鉴",
          keyId: 25,
          appointmentNumber: 304,
          state: 1,
          viewNumber: 929,
          time: ("2018-1-24 02:30"),
          Picture: require("./tu1.jpg"),
          tag: "资治通鉴--马嵬之变",
          jianjie: ("众怒难犯，陛下的安危就在今日，愿陛下速速决断。"),
        },
      ]
      }
  },
  methods: {
    // 下拉刷新
    loadTop(done) {
      done(true);
    },
    // 加载更多
    loadBottom(done) {
      console.log("加载更多");
      done(true)
    }
  },
  created() {
    console.log('页面加载钩子')
  },
}
</script>

<style>
.container{
  font-family: "微软雅黑";
}
.shequ{
  box-shadow:0 0 2px rgb(48, 44, 44) inset;
}
.head{
  background-color: #dcebe4;
  font-size: 20px;
  padding: 10px 0;
  text-align: center;
}
.title{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 15px 0 0 0 ;
}
.touxiang{
  width: 30px;
  margin: 5px;
}
.img-fadein{
  width: 25px;
  border-radius: 50%;
  border:1px solid #fff;
}
.pro-name{
  width: 100%;
}
.name{
  padding: 7px;
  font-size: 15px;
  color: #6b6a6a;
}
.time{
  font-size:12px;
  padding: 5px 0 0 0 ;
  margin: 0;
  color: #000;
}
.content{
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 0 15px 0;
  margin: 0;
}
.tag{
  padding: 5px 10px ;
  font-size: 18px;
  color: #001;
}
.jianjie{
  font-size: 12px;
  color: gray;
  padding: 5px 10px;
}
.border{
  height: 10px;
  background-color: #ededed;
  padding: 0;
  margin: 0;
  width: 100%;
}
.pro-item{
  margin: 0;
  padding: 0;
}
.img{
  height: 80px;
  width: 80px;
  padding: 20px 5px 0 5px;
}
</style>
